<template>
  <div class="my-cover">
    <div @click="openDialog" class="cover-button">
      <img :src="value||coverImageUrl" alt="" />
    </div>
    <el-dialog
      append-to-body
      :visible.sync="dialogVisible"
      width="740px"
      :before-close="handleClose"
    >
      <!-- tab -->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="素材列表" name="images">
          <!-- tab -->
          <el-radio-group
            v-model="form.collect"
            size="small"
            style="margin-top: 10px"
            @change="changeCollect"
          >
            <el-radio-button :label="false"
              >全部
              <!-- {{form.collect}} -->
            </el-radio-button>
            <el-radio-button :label="true">收藏</el-radio-button>
          </el-radio-group>
          <!-- 图片 -->
          <ul class="image-list">
            <li
              v-for="item in images"
              :key="item.id"
              :class="{ active: selectedImgUrl === item.url }"
              @click="selectImage(item.url)"
            >
              <img :src="item.url" alt="" />
            </li>
          </ul>
          <!-- 分页 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="changePage"
            :page-size="form.per_page"
            :current-page="form.page"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="上传图片" name="upload">
          <el-upload
            class="avatar-uploader"
            :action="uploadURL"
            :show-file-list="false"
            :on-success="handleUploadSuccess"
            :headers="uploadHeaders"
            name="image"
          >
            <!-- <span>上传组件</span> -->
            <img v-if="imageUrll" :src="imageUrll" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-tab-pane>
      </el-tabs>
      <!-- 素材列表 -->
      <!-- 按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="comfirmImage">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import img from '@/assets/image/default.png'
export default {
  // name:'my-cover',
  props: ['value'],
  data () {
    return {
      form: {
        collect: false,
        page: 1,
        per_page: 8
      },
      //    imgurl: null,
      dialogVisible: false,
      activeName: 'images',
      images: [],
      total: null,

      uploadURL: this.$http.defaults.baseURL + '/mp/v1_0/user/images',
      uploadHeaders: {
        Authorization: 'Bearer ' + window.localStorage.getItem('token')
      },
      //   选中的
      selectedImgUrl: null,
      //   上传
      imageUrll: null,
      coverImageUrl: img
    }
  },
  methods: {
    comfirmImage () {
      if (this.activeName === 'images') {
        if (!this.selectedImgUrl) {
          this.$message({
            type: 'warning',
            message: '请选择一张图片'
          })
          return false
        } else {
        //   this.coverImageUrl = this.selectedImgUrl;
          this.$emit('input', this.selectedImgUrl)
        }
      }
      if (this.activeName === 'upload') {
        if (!this.imageUrll) {
          this.$message({
            type: 'warning',
            message: '请上传一张图片'
          })
          return false
        } else {
        //   this.coverImageUrl = this.imageUrll;
          this.$emit('input', this.imageUrll)
        }
      }
      this.$emit('on-comfirm')
      this.dialogVisible = false
    },
    handleUploadSuccess (result) {
      // console.log(result);
      this.imageUrll = result.data.url
      this.$message({
        type: 'success',
        message: '上传成功!'
      })
      //         window.setTimeout(()=>{

      //           this.dialogVisible = false;
      //         },3000)
      //          this.getPics();
    },
    selectImage (itemUrl) {
      this.selectedImgUrl = itemUrl
    },
    changeCollect () {
      this.form.page = 1
      this.getImages()
    },
    changePage (changedPage) {
      this.form.page = changedPage
      this.getImages()
    },
    async getImages () {
      // this.form.page = 1
      const {
        data: { data }
      } = await this.$http.get('/mp/v1_0/user/images', { params: this.form })
      this.images = data.results
      this.total = data.total_count
      //   this.imgurl = data.results.url;
    },
    openDialog () {
      this.dialogVisible = true
      this.form.page = 1
      //   上传
      this.imageUrll = null
      //   选中
      this.selectedImgUrl = null
      this.activeName = 'images'
      this.getImages()
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    }
  }
}
</script>

<style scoped lang='less'>
.my-cover {
  display: inline-block;
  .cover-button {
    width: 150px;
    height: 150px;
    margin-right: 20px;
    margin-top: 10px;
    border: 1px dashed #dddddd;
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
}
::v-deep .el-dialog__body {
  padding-top: 0;
  padding-bottom: 0;
}

.image-list {
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  li {
    position: relative;
    margin-right: 20px;
    margin-top: 20px;
    width: 150px;
    height: 150px;
    border: 1px dashed #dddddd;
    &.active {
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4) url(../assets/image/selected.png)
          no-repeat center / 50px 50px;
      }
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
